<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box"></div>
<input type="text" id="txt">
<input type="button" value="点我" id="btn">
    <script>
        /*
        1 创建对象 element
            及对象的相关属性设置
        2 创建文本节点，

        3、将创建的文本对象附加到 1中所创建的element对象

        4 将 1中创造的对象，附加到当前页面中

         */


        document.getElementById('btn').onclick = function () {
            var divObj = document.createElement('div');
            var txtObj = document.getElementById('txt');
            var txt = txtObj.value;
            var txtNode = document.createTextNode(txt);
            divObj.appendChild(txtNode);
            txtObj.value='';

//       document.body.appendChild(divObj)
            document.getElementById('box').appendChild(divObj)
        }


        console.log(divObj);
        console.log(txtNode);
        console.log(txtNode.toString());
    </script>
</body>
</html>